<template>
	<view class="">
		<u-navbar :is-back="true" :border-bottom="false" title="模块管理" height="46" title-color="#333" :title-bold="true"
		 :title-size="36">
		</u-navbar>
		<view class="resume_tsfw">
			<u-section title="已有模块" sub-title="排序" :show-line="false" v-if="!sortshow" sub-color="#00C091" font-size="32" :arrow="false"
			 @click="GoSort"></u-section>
			<u-section title="已有模块" sub-title="确认" :show-line="false" v-if="sortshow" sub-color="#00C091" font-size="32" :arrow="false"
			 @click="GoSort"></u-section>
			<view class="">

				<view class="resume_yymk_box" v-for="(item,index) in list" :key="index" >
					<view class="resume_yymk_img">
						<image :src="item.src" mode="widthFix"></image>
					</view>
					<view class="resume_yymk_text">
						{{item.name}}
					</view>
					<u-icon name="trash" color="#999999" size="30" style="margin-left: 15rpx;" v-if="!sortshow" @click="Trash(index)"></u-icon>
					<u-icon name="arrow-down" color="#999999" size="30" style="margin-left: 15rpx;" v-if="sortshow" class="arrow_down"
					 @click="ArrowDown(index)"></u-icon>
					<view class="" style="width: 50rpx;height: 40rpx;" v-if="sortshow">
						<u-icon name="arrow-up" color="#999999" size="30" style="margin-left: 15rpx;" v-if="sortshow" class="arrow_up"
						 @click="Arrowup(index)"></u-icon>
					</view>
				</view>

			</view>

		</view>
		<u-gap height="20" bg-color="#F7F7F7"></u-gap>
		<view class="resume_tsfw"  v-if="list2.length">
			<u-section title="添加模块" :right="false" sub-color="#00C091" font-size="32" :show-line="false"></u-section>
			<view class="resume_yymk_box" v-for="(item,index) in list2" :key="index">
				<view class="resume_yymk_img">
					<image :src="item.src" mode="widthFix"></image>
				</view>
				<view class="resume_yymk_text">
					{{item.name}}
				</view>
				<u-icon name="plus" color="#999999" size="28" style="margin-left: 15rpx;" @click="Plus(index)"></u-icon>
			</view>
		</view>
		<u-toast ref="uToast" />
		<view class="resume_qrbc">
			<u-button class="custom-style" shape="circle" @click="QrbcList">确认保存</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				sort: "排序",
				sortshow: false,
				id:"",
				list: [],
				list2: [],
				thmconfig:{
					leftbox:[],
					rightbox:[],
				},
				listzt: [{
						src: "../../../static/index/resume/jbxx.png",
						name: "基本信息",
						namexb: "rscbase"
					},
					// {
					// 	src: "../../../static/index/resume/jbxx.png",
					// 	name: "姓名",
					// 	namexb: "rscname"
					// },
					{
						src: "../../../static/index/resume/jbxx.png",
						name: "自我评价",
						namexb: "rsczwpj"
					},
					// {
					// 	src: "../../../static/index/resume/jbxx.png",
					// 	name: "头像",
					// 	namexb: "rsclogo"
					// },
					{
						src: "../../../static/index/resume/jbxx.png",
						name: "工种信息",
						namexb: "rscgzbox"
					},
					{
						src: "../../../static/index/resume/jbxx.png",
						name: " 管理信息",
						namexb: "rscglbox"
					},
					{
						src: "../../../static/index/resume/jbxx.png",
						name: "  团队信息",
						namexb: "rsctdbox"
					},
					// {
					// 	src: "../../../static/index/resume/jbxx.png",
					// 	name: "求职意向",
					// 	namexb: "rscwhere"
					// },
					{
						src: "../../../static/index/resume/jbxx.png",
						name: "教育背景",
						namexb: "rscjyjl"
					},
					{
						src: "../../../static/index/resume/jbxx.png",
						name: "奖项荣誉",
						namexb: "rsczs"
					},
					{
						src: "../../../static/index/resume/jbxx.png",
						name: "工作经验",
						namexb: "rscgzjl"
					},
					{
						src: "../../../static/index/resume/jbxx.png",
						name: "作品展示",
						namexb: "rscgcal"
					}
				]
			}
		},
		async onLoad(options) {
			this.id=options.id
			await this.resumemy(options.id)
		},
		methods: {
			GoSort() {
				this.sortshow = !this.sortshow
			},
			async resumemy(id) {
				let _this = this
				let params = {
					ak: this.$store.state.token,
					cmd: 'lPeople_myquery',
					para: {
						"id": id,
					}
				}
				const res = await this.$u.api.resumedata(params)
				console.log(res.Data.thmconfigapp)
				let config = []
				if (JSON.parse(res.Data.thmconfig).topbox) {
					config.push([...JSON.parse(res.Data.thmconfig).topbox])
				}
				if (JSON.parse(res.Data.thmconfig).bottombox) {
					config.push([...JSON.parse(res.Data.thmconfig).bottombox])
				}

				if (JSON.parse(res.Data.thmconfig).leftbox) {
					config.push([...JSON.parse(res.Data.thmconfig).leftbox])
				}
				if (JSON.parse(res.Data.thmconfig).rightbox) {
					config.push([...JSON.parse(res.Data.thmconfig).rightbox])
				}
				config = config.flat(Infinity)
				config.forEach(function(val) {
					_this.listzt.forEach(function(time) {
						if (val == time.namexb) {
							_this.list.push(time)
						}
					})
				})
				this.list2 = this.listzt.filter(item => !new Set(this.list).has(item))
			},

			ArrowDown(index) {
				let temp = this.list[index]
				this.$set(this.list, index, this.list[index + 1])
				this.$set(this.list, index + 1, temp)
			},
			Arrowup(index) {
				let temp = this.list[index]
				this.$set(this.list, index, this.list[index - 1])
				this.$set(this.list, index - 1, temp)
			},
			Plus(index) {
				let temp = this.list2[index]
				this.$set(this.list, this.list.length, temp)
				this.list2.splice(index, 1);
			},
			Trash(index) {
				let temp = this.list[index]
				if (temp.name != "自定义模块") {
					this.$set(this.list2, this.list2.length, temp)
				}
				this.list.splice(index, 1);
			},
		 async QrbcList(){
				let $t = this
				this.thmconfig = JSON.stringify(this.thmconfig)
				let params = {
					ak: this.$store.state.token,
					cmd: 'lPeople_myupdate',
					para: {
						"thmconfig": this.thmconfig,
						"id": this.id
					}
				}
				const res = await this.$u.api.resumexgdata(params)
				if (res.ResponseID == 0) {
					this.$refs.uToast.show({
						title: res.Message,
						icon: false,
						duration: 800,
						callback() {
						uni.$emit('refreshData');
						uni.navigateBack({
							delta: 1
						})
						}
					})
				
				}
			}
		},
		watch: {
			list: {
				handler(newName, oldName) {
					this.thmconfig={
						leftbox:[],
						rightbox:[],
					}
					for (var value of this.list.values()) {
						if(value.namexb=="rscbase"){
							this.thmconfig.leftbox.push("rsclogo","rscbase")
							this.thmconfig.rightbox.splice(0,0,"rscname")
						}else{
							this.thmconfig.rightbox.push(value.namexb)
						}
					}
				},
				immediate: false,
				deep: true,
			}
		
		},
	}
</script>

<style scoped lang="scss">
	.resume_tsfw {
		padding: 30rpx 30rpx 0 30rpx;
	}

	.resume_yymk_box {
		display: flex;
		align-items: center;
		padding: 30rpx 0;
		border-bottom: 2rpx solid #e5e5e5;

		&:first-child {
			.arrow_up {
				display: none;
			}
		}

		&:last-child {
			border-bottom: none;

			.arrow_down {
				display: none;
			}
		}

		.resume_yymk_img {
			width: 70rpx;
			height: 70rpx;
			margin-right: 30rpx;

			image {
				width: 70rpx;

			}
		}

		.resume_yymk_text {
			flex: 1;
			font-size: 30rpx;
			color: #313332;
		}
	}

	/deep/.uicon-plus {
		border-radius: 50%;
		border: 2rpx solid #999999;
	}
	.resume_qrbc{
		position: sticky;
		bottom: 0;
		left: 0;
		background: #fff;
		width: 100vw;
		height: 130rpx;
		// border-top: 2rpx solid #00C091;
		box-shadow: 0 5px 10px rgba(#00C091, 0.8);
		padding:15rpx 30rpx;
	}
	.custom-style{
		width: 70%;
		height: 100rpx;
		background-color:#00C091 ;
		color: #fff;
		font-size: 30rpx;
	}
</style>
